<template>
    <n-card :bordered="false" content-style="padding: 0">
        <n-card :bordered="false" content-style="padding: 0; display: flex; justify-content: space-between;">
            <n-space>
                <n-form-item label="名称" label-placement="left" :show-feedback="false">
                    <n-input v-model:value="queryForm.name" size="small" />
                </n-form-item>
            </n-space>
            <n-space>
                <n-button size="small" type="info" @click="handleSelectOnClick">查询</n-button>
            </n-space>
        </n-card>

        <n-card :bordered="false" content-style="padding: 10px 0 10px 0; display: flex; justify-content: space-between;">
            <n-space>
                <n-button @click="handleInsertOnClick" size="small" type="info">新增</n-button>
            </n-space>

            <n-space>
                <n-tooltip placement="bottom">
                    <template #trigger>
                        <n-icon size="22">
                            <SettingsIcon/>
                        </n-icon>
                    </template>
                    列设置
                </n-tooltip>
            </n-space>
        </n-card>

        <n-data-table
            table-layout="fixed"
            :bordered="false"
            :loading="loading"
            :columns="columns"
            :data="records"
            :pagination="pagination"
            remote
        />

        <n-modal
            :title="modal.title"
            preset="card"
            v-model:show="modal.show"
        >
            <n-form
                label-width="auto"
                label-placement="left"
            >
                <n-form-item label="名称">
                    <n-input v-model:value="form.name"/>
                </n-form-item>
                <n-form-item label="电话">
                    <n-input v-model:value="form.phone"/>
                </n-form-item>
                <n-form-item label="邮箱">
                    <n-input v-model:value="form.email"/>
                </n-form-item>
                <n-form-item label="状态" show-require-mark>
                    <n-radio-group v-model:value="form.status">
                        <n-radio label="正常" value="1"/>
                        <n-radio label="停用" value="0"/>
                    </n-radio-group>
                </n-form-item>
                <n-form-item label="备注">
                    <n-input type="textarea" v-model:value="form.remark"/>
                </n-form-item>
            </n-form>
            <template #footer>
                <n-space justify="end">
                    <n-button type="info" @click="handleConfirmOnClick">确认</n-button>
                    <n-button @click="handleCloseOnClick">关闭</n-button>
                </n-space>
            </template>
        </n-modal>
    </n-card>
</template>
<script lang="ts" setup>
import { NSpace, NButton } from 'naive-ui'
import { reactive, onMounted, toRefs, h, computed } from 'vue'
import { Settings as SettingsIcon } from '@vicons/carbon'
import { basicColumns } from './columns'
import { getDemo, getDemoPage, postOrPutDemo, deleteDemo } from '@/api/development/demo'
import { usePagination } from '@/hooks/usePagination'

const state = reactive({
    loading: false as boolean,
    records: [] as Demo[],
    queryForm: {

    } as Demo,
    form: {

    } as Demo,
    pagination: usePagination(handleSelectOnClick),
    modal: {
        show: false,
        title: ''
    }
})

const {
    loading,
    queryForm,
    records,
    form,
    pagination,
    modal
} = toRefs(state)

onMounted(() => {
    handleSelectOnClick()
})

async function handleSelectOnClick() {
    state.loading = true
    const { data } = await getDemoPage(state.pagination, state.queryForm)
    state.records = data.records
    state.pagination.pageCount = data.pages
    state.loading = false
}

const columns = computed (() => {
    return [
        ...basicColumns,
        {
            key: 'action',
            title: '操作',
            render(row: Demo) {
                return h(
                    NSpace,
                    () => [
                        h(
                            NButton,
                            {
                                size: 'tiny',
                                onClick: () => handleUpdateOnClick(row.id)
                            },
                            {default: () => '修改'}
                        ),
                        h(
                            NButton,
                            {
                                size: 'tiny',
                                onClick: () => handleDeleteOnClick(row.id)
                            },
                            {default: () => '删除'}
                        )
                    ]
                )
            }
        }
    ]
})

const handleInsertOnClick = () => {
    state.modal.show = true
    state.modal.title = '新增'
    state.form = {} as Demo
}

const handleUpdateOnClick = async (id: string) => {
    state.modal.show = true
    state.modal.title = '修改'
    const { data } = await getDemo(id)
    state.form = data
}

const handleConfirmOnClick = async () => {
    await postOrPutDemo(state.form)
    state.modal.show = false
    await handleSelectOnClick()
}

const handleDeleteOnClick = async (id: string) => {
    await deleteDemo(id)
    await handleSelectOnClick()
}

const handleCloseOnClick = () => {
    state.modal.show = false
}

</script>

<style lang="scss" scoped>
.n-icon{
    cursor: pointer;
}
.n-pagination{
    --n-item-border-active: 1px solid #2d8cf0!important;
    --n-item-text-color-active: #2d8cf0!important;
}
</style>